<template>
  <div id="container"></div>
</template>
<script>
export default {
  data() {
    return {};
  },
  components: {},
  created() {},
  mounted() {
    this.initData();
  },
  methods: {
    //初始化数据
    initData() {
      this.initMap();
    },
    //初始化地图
    initMap() {
      this.map = new window.AMap.Map("container", {
        resizeEnable: true, //窗口大小调整
        center: this.firstArr, //中心 firstArr: [116.478935, 39.997761],
        zoom: 15,
      });
      //this.map.setMapStyle("amap://styles/" + "darkblue");
      this.marker = new window.AMap.Marker({
        map: this.map,
        position: this.firstArr,
        icon: "https://webapi.amap.com/images/car.png",
        //offset: new AMap.Pixel(-26, -13), //调整图片偏移
        autoRotation: true, //自动旋转
        angle: -90, //图片旋转角度
      });

      this.initroad();
    },
    //初始化轨迹
    initroad() {
      //绘制还未经过的路线
      this.polyline = new window.AMap.Polyline({
        map: this.map,
        path: this.lineArr,
        showDir: true,
        strokeColor: "#28F", //线颜色--蓝色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6, //线宽
        // strokeStyle: "solid"  //线样式
      });
      //绘制路过了的轨迹
      var passedPolyline = new window.AMap.Polyline({
        map: this.map,
        strokeColor: "#AF5", //线颜色-绿色
        //path: this.lineArr,
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6, //线宽
        // strokeStyle: "solid"  //线样式
      });
      this.marker.on("moving", (e) => {
        passedPolyline.setPath(e.passedPath);
      });
      this.map.setFitView(); //合适的视口
    },

    startAnimation() {
      this.marker.moveAlong(this.lineArr, this.markerSpeed);
    },
    pauseAnimation() {
      this.marker.pauseMove();
    },
    resumeAnimation() {
      this.marker.resumeMove();
    },
    stopAnimation() {
      this.marker.stopMove();
    },
  },
};
</script>
<style scoped lang="scss">
#container {
  width: 100%;
  height: 650px;
  margin: 0 auto;
  overflow: hidden;
}
/**无效 */
#container .amap-logo {
  display: none;
  opacity: 0 !important;
}
#container .amap-copyright {
  opacity: 0;
}
</style>